My Website : Style Sheets : IE Fixes

Style Sheets : IE Fixes

This page's vital information:

Physical location: ./pages/00_Home/Style Sheets/IE Fixes.html
Link here with: <a href="?page=Style Sheets/IE Fixes">

Since Microsoft's Internet Explorer (IE) never has and most likely never will actually adhere to the World Wide Web Consortium (W3C) coding standards for web mark up languages, we need to have special style sheets to over-ride certain elements so that pages can render correctly in IE.

This page won't go into detail about how to fix your CSS problems with IE, but will talk about how and where to create the necessary files.

IE Fixes for styles based on pencils.css or wide_pencils.css

If you use "pencils" or "wide_pencils" as a starting point of your own template, you'll also need to copy the "lt_7-pencils.css" (or "lt_7-wide_pencils.css") that is contained within the "IE_fixes" directory.

Basically IE before v7 didn't add padding correctly to an item. The net result with my "pencils" style sheet was that it ended up 20 pixels too narrow as IE padded 10 pixels on the inside instead of the outside. This squashed the page list and page body panels together, instead of leaving a 20 pixel gap down the middle of them. The style "blue" doesn't have the same problem, as there is no padding specified on the "id=wrap" hence there not being a "lt_7-blue.css" inside the "IE_fixes" directory.

Every version of IE has its own individual problems, so to cater for all rendering possibilities, the software will search for CSS files in the <IE_Fixes> directory of <style_sheets> for files with the following prefixes (and in the following order):

Order	Prefix	Meaning
1	lt_5.5-	fixes for IE less than v5.5
2	eq_5.5-	fixes for IE v5.5
3	lt_6-	fixes for IE less than v6
4	eq_6-	fixes for IE v6
5	lt_7-	fixes for IE less than v7
6	eq_7-	fixes for IE v7
7	lt_8-	fixes for IE less than v8
8	eq_8-	fixes for IE v8
9	lt_9-	fixes for IE less than v9
10	eq_9-	fixes for IE v9

Multiple "fixes" files are allowed, in fact a file for every entry detailed above can exist. When one of the "IE Fixes" files is found, an special line of code will be written into the XHTML output. For example, in the case of "pencils.css" with the "IE Fixes" file "lt_7-pencils.css" the following:

The file name of the "IE Fix" must be of the following structure:

<ie_condition><style_sheet_name>.css

Where:
ie_condition = an entry as listed in the table above including the "-"
style_sheet_name = the name of the style sheet selected

IE Fixes for "extra" style sheets

Inside the <style_sheets/extra> directory, where you place any extra style sheets that you want to apply to pages (irrelevant of the overall page style), you can create "IE Fixes" for these in the <style_sheets/extra/IE_Fixes> directory in exactly the same manner as described above for the main page style sheets.